<template>
  <div class="app-container">
    <div class="table-container">
      <!-- 搜索 -->
      <el-row class="filter-container no-select">
        <!-- 简单搜索 -->
        <el-col :span="24" class="simple-filter">
          <!-- 按钮功能区 -->
          <el-button plain type="primary" icon="el-icon-plus">新增</el-button>
          <el-button plain type="danger" icon="el-icon-delete">删除</el-button>
          <el-button plain type="info" icon="el-icon-upload2">导入</el-button>
          <el-button plain type="warning" icon="el-icon-download">导出</el-button>

          <!-- 简单搜索框区 -->
          <div class="simple-search">
            <el-input v-model="input3" class="input-with-select" placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search" title="搜索" />
            </el-input>

            <el-button type="primary">高级搜索<i class="el-icon-zoom-in el-icon--right" /></el-button>

            <!-- 刷新 -->
            <el-button plain type="info" icon="el-icon-refresh" title="刷新" />
          </div>
        </el-col>
        <!-- 高级搜索 -->
        <el-col :span="24" class="complex-filter">
          <el-form ref="form" :model="form" label-width="100px" class="pane">
            <el-row :gutter="10">
              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="活动名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="即时配送" pane class="pane">
                  <el-switch v-model="form.delivery" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="性别" pane class="pane">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="男" />
                    <el-radio label="女" />
                    <el-radio label="保密" />
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="活动名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="即时配送" pane class="pane">
                  <el-switch v-model="form.delivery" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="性别" pane class="pane">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="男" />
                    <el-radio label="女" />
                    <el-radio label="女xx" />
                    <el-radio label="aaaa" />
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="活动名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="即时配送" pane class="pane">
                  <el-switch v-model="form.delivery" />
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="性别" pane class="pane">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="男" />
                    <el-radio label="女" />
                    <el-radio label="女xx" />
                    <el-radio label="aaaa" />
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="活动性质" pane class="pane">
                  <el-checkbox-group v-model="form.type">
                    <el-checkbox label="美食" name="type" />
                    <el-checkbox label="地推活动" name="type" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item label="活动区域">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                <el-form-item no-label class="no-label">
                  <el-button>重置条件</el-button>
                  <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        class="filter-table"
        height="calc(100vh - 302px)"
      >

        <el-table-column
          type="selection"
          align="center"
          width="40"
        />

        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
        />

        <el-table-column
          prop="date"
          label="日期"
          width="150"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
        />
        <el-table-column
          prop="province"
          label="省份"
        />
        <el-table-column
          prop="city"
          label="市区"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="zip"
          label="邮编"
          width="120"
        />
      </el-table>

      <!-- 表格分页 -->
      <div class="filter-pagination no-select">
        <div class="select-text">共选择<span class="number">3</span>条数据!</div>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Logininfor',
  data() {
    return {
      input3: '',
      select: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      currentPage4: 4,
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 4,
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 5,
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 6,
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 7,
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 12,
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 13,
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 14,
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 15,
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 16,
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 17,
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  created() {
  },
  methods: {
    getList() {

    },
    onSubmit() {
      console.log('submit!')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss">
  .app-main{
    background-color: #f2f2f2;

    .table-container {
      .filter-table {
        .el-table__header th{
          background: #f2f2f2;
        }

        .el-table__header tr th:nth-last-child(2),
        .el-table__body .el-table__row td:last-child{
          border-right-width: 0;
        }

        .el-table__body td.el-table-column--selection .cell{
          padding-right: 0.625rem;
        }
      }

      .filter-pagination {
        .el-pagination {
          .btn-prev,
          .btn-next,
          .el-pager li{
            background-color: transparent;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  $bg: #fff;
  $space: 0.625rem;

  .table-container {
    background-color: $bg;
    border: 1px solid $--border-color-light;
    border-radius: 4px;
    overflow: hidden;

    .filter-container{
      background-color: $bg;
      padding: 0;

      .simple-filter {
        padding: $space;
        position: relative;
        .simple-search{
          position: absolute;
          right: $space;
          top: $space;
          .input-with-select{
            width: 13.75rem;
            margin-right: $space;
          }
        }
      }

      .complex-filter{
        padding: $space $space 0 $space;
        border-top: 1px solid $--border-color-light;
        .el-form-item{
          margin-bottom: $space;
        }
      }
    }

    .filter-table {
      border-left-width: 0;

      &::after,
      &::before {
        background-color: transparent;
      }
    }

    .filter-pagination {
      $elPaginationHeight: 32px;
      $paginationHeight: 40px;

      position: relative;
      height: $paginationHeight;
      line-height: $paginationHeight;
      padding: 0 $space;
      font-size: 13px;
      background-color: #fafafa;
      color: #606266;
      border-top: 1px solid $--border-color-light;

      .select-text .number {
        color: red;
        padding: 0 calc(#{$space} / 2);
      }

      .el-pagination {
        position: absolute;
        height: $elPaginationHeight;
        line-height: $elPaginationHeight;
        right: $space;
        top: 0;
        margin: calc((#{$paginationHeight} - #{$elPaginationHeight}) / 2) 0;
      }
    }
  }
</style>
